<template>
  <view class="music-head" :style="{ color: color}" :class="{ 'music-head-black' : iconBlack }">
    <view class="music-head-icon" v-if="show">
      <text class="iconfont icon-zuojiantou-copy" @tap="handelToBack"></text>
      |
      <text class="iconfont icon-home_fill_light" @tap="handelToHome"></text>
    </view>
    {{ title }}
  </view>
</template>

<script>
  export default {
    name:"musicHead",
    data() {
      return {
        
      }
    },
    props: ["title","show","color","iconBlack"],
    methods: {
      handelToBack () {
        uni.navigateBack()
      },
      
      handelToHome () {
        uni.navigateTo({
          url: '/pages/index/index'
        })
      }
    }
  }
</script>

<style scoped>
  .music-head {
    position: relative;
    width: 100%;
    height: 75px;
    line-height: 80px;
    font-size: 16px;
    text-align: center;
    color: #000;
    font-weight: 700;
  }
  .music-head-icon {
    position: absolute;
    left: 7px;
    top: 24px;
    display: flex;
    justify-content: space-evenly;
    width: 86px;
    height: 31px;
    border-radius: 31px;
    border: 1px solid rgba(0, 0, 0, .3);
    background: rgba(0, 0, 0, .2);
    line-height: 31px;
  }
  .music-head-black .music-head-icon {
    color: #e6e6e6;
    background: #fff;
    border-color: #e6e6e6;
  }
  .music-head-black text {
    color: #000;
  }
</style>
